<template>
  <el-form ref="ruleForm"
           :model="form"
           label-width="120px"
           label-position="right"
           size="small">
    <div class="radioGroupSty">
      <el-radio-group v-model="form.transportMode"
                      class="transport-type"
                      @change="changeTransportMode">
        <el-radio-button :label="1">零担</el-radio-button>
        <el-radio-button :label="2">整车</el-radio-button>
      </el-radio-group>
    </div>
    <el-row class="mt40">
      <template v-for="(item, i) in transportData">
        <el-col :key="`${item.prop}${i}`"
                :span="5"
                :offset="item.type === 'chargeMode' ? 1 : 0">
          <el-form-item v-if="form.transportMode === 1"
                        :label="item.label"
                        :prop="item.prop">
            <el-select v-if="item.type === 'chargeMode'"
                       v-model="form[item.prop]">
              <el-option v-for="(ele, index) in item.option"
                         :key="index"
                         :label="ele.label"
                         :value="ele.value">
              </el-option>
            </el-select>
            <price-unit v-if="item.type === 'priceUnit'"
                        v-model="form[item.prop]"
                        :disabled="!form.chargeMode"
                        :charge-mode.sync="form.chargeMode" />
          </el-form-item>
        </el-col>
      </template>
    </el-row>
    <el-row>
      <el-col :offset="schedule ? 0 : 1"
              :span="24">
        <div v-if="form.transportMode === 2">
          <models-selector ref="modelsSelector"
                           :form-info="form"
                           @confirm="carTypeModel" />
          <el-form-item label="整车数量"
                        :prop="`vehicleMode.vehicleCount`"
                        :rules="[{ required: true, message: `请选择整车数量` }]">
            <el-select v-model="form.vehicleMode['vehicleCount']"
                       style="width: 18.15%"
                       readonly
                       @change="handleChangeVehicleCount">
              <el-option v-for="i in 10"
                         :key="i"
                         :value="i">{{ i }}车</el-option>
            </el-select>
          </el-form-item>
        </div>
        <template v-for="(item, i) in packageData">
          <el-form-item :key="`${item.prop}${i}`"
                        :label="item.label"
                        :prop="`${[item.prop]}`"
                        :rules="[
              {
                required: item.prop === 'insure' ? false : true,
                message: `请选择${item.label}`
              }
            ]">
            <el-radio-group v-if="item.type === 'radio'"
                            v-model="form[item.prop]">
              <el-radio v-for="(val, index) in item.option"
                        :key="index"
                        border
                        :label="val.value">{{ val.label }}</el-radio>
            </el-radio-group>
            <el-checkbox-group v-else-if="item.type === 'checkbox'"
                               v-model="form[item.prop]">
              <el-checkbox v-for="(val, index) in item.option"
                           :key="index"
                           border
                           :label="val.value">{{ val.label }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </template>
        <!-- <hr> -->
        <el-form-item label="运输要求">
          <el-checkbox v-if="form.transportMode !== 2"
                       v-model="form.pick"
                       :true-label="1"
                       :false-label="0"
                       border>提货</el-checkbox>
          <el-checkbox v-if="form.transportMode !== 2"
                       v-model="form.deliver"
                       border
                       :true-label="1"
                       :false-label="0">送货</el-checkbox>
          <el-checkbox v-model="form.onLoad"
                       border
                       :true-label="1"
                       :false-label="0">装货</el-checkbox>
          <el-checkbox v-model="form.offLoad"
                       border
                       :true-label="1"
                       :false-label="0">卸货</el-checkbox>
        </el-form-item>
      </el-col>
      <template v-for="(item, i) in transportData">
        <el-col :key="`${item.prop}${i}`"
                :span="5"
                :offset="item.type === 'chargeMode' ? 1 : 0"
                style="margin-top: 12px">
          <el-form-item v-if="form.transportMode === 2 && (form.onLoad || form.offLoad)"
                        :label="item.label"
                        :prop="item.prop">
            <el-select v-if="item.type === 'chargeMode'"
                       v-model="form[item.prop]">
              <el-option v-for="(ele, index) in item.option"
                         :key="index"
                         :label="ele.label"
                         :value="ele.value">
              </el-option>
            </el-select>
            <price-unit v-if="item.type === 'priceUnit'"
                        v-model="form[item.prop]"
                        :disabled="!form.chargeMode"
                        :charge-mode.sync="form.chargeMode" />
          </el-form-item>
        </el-col>
      </template>
      <el-col :span="24"
              :offset="schedule ? 0 : 1">
        <number-type :form-info="form"
                     @getReply="getReply" />
      </el-col>
      <el-col :span="24"
              :offset="schedule ? 0 : 1">
        <el-form-item label="备注"
                      prop="remarks">
          <el-input v-model="form.remarks"
                    type="textarea"
                    maxlength="200"
                    style="width: 38%"
                    show-word-limit
                    :rows="4"></el-input>
        </el-form-item>
      </el-col>
      <el-col :offset="schedule ? 0 : 1"
              :span="22"
              style="margin-bottom: 20px">
        <el-form-item label="附件"
                      prop="attachments">
          <upload-file-selector :is-onload="true"
                                :is-create="true"
                                :is-cover="true"
                                :is-create-order="true"
                                :attach-form.sync="form.attachments"
                                :request-url="uploadFileRequest"
                                style="margin-bottom: 20px"
                                @handleUpload="handleUpload" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import baseMixin from "@components/mount/mixins/common";
import ModelsSelector from "@/components/advance/ModelsSelector/ModelsSelector.vue";
import UploadFileSelector from "@/components/advance/upload/UploadFileSelector.vue";
import PriceUnit from "@components/advance/priceUnit/PriceUnit.vue";
import NumberType from "@components/numberType";
export default {
  name: "Transport",
  components: {
    ModelsSelector,
    UploadFileSelector,
    PriceUnit,
    NumberType
  },
  mixins: [baseMixin],
  props: {
    formInfo: {
      type: Object,
      default: () => { }
    },
    schedule: {
      type: Boolean,
      default: false
    },
    emptyForm: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      uploadFileRequest: "/basic/upload",
      rules: {},
      packageData: [
        {
          label: "货物分类",
          prop: "goodsCategory",
          type: "radio",
          option: [
            { label: "普通货物", value: 1 },
            { label: "危险品", value: 2 },
            { label: "温控货物", value: 3 }
          ]
        },
        {
          label: "包装方式",
          prop: "packageMode",
          type: "radio",
          option: [
            { label: "散箱", value: 1 },
            { label: "托盘或木箱", value: 2 },
            { label: "托盘、木箱或不规则形状", value: 3 }
          ]
        },
        {
          label: "是否保价",
          prop: "insure",
          type: "radio",
          option: [
            { label: "保价", value: 1 }, // true
            { label: "不保价", value: 0 } // false
          ]
        }
      ],
      transportData: [
        {
          label: "计费模式",
          prop: "chargeMode",
          type: "chargeMode",
          option: [
            { label: "重量", value: 1 },
            { label: "体积", value: 2 },
            { label: "数量", value: 3 }
          ]
        },
        {
          label: "计价单位",
          prop: "priceUnit",
          type: "priceUnit"
        }
      ],
      priceUnit: [],
      form: {
        vehicleLength: ""
      },
      showGoods: false, //物品组件
      isSender: false,
      isDeploy: false,
      isOrders: false
    };
  },
  computed: {
    showChargeMode () {
      return true;
    }
  },
  watch: {
    emptyForm: {
      immediate: true,
      handler (val) {
        this.form = val;
      }
    }
  },
  created () {
    this.form = this.formInfo;
    console.log(this.formInfo);
  },
  methods: {
    // 修改运输模式
    changeTransportMode (val) {
      this.$message.warning(`您已切换${val === 1 ? "零担" : "整车"}业务`);
      if (val == 1) {
        this.form.priceUnit = 3;
        this.form.chargeMode = 2;
      } else {
        this.form.vehicleMode = {
          vehicleCount: 1,
          vehicleLength: null,
          vehicleType: null,
          vehicleVolume: null,
          vehicleWeight: null
        };
      }
    },
    // 整车数量
    handleChangeVehicleCount (val) {
      this.form.vehicleMode.vehicleCount = val;
    },
    // 上传附件
    handleUpload (fileList) {
      const files = fileList.map((x) => {
        return {
          name: x.attachName,
          type: 2,
          url: x.attachUrl
        };
      });
      this.form.attachments = files;
    },
    reset () {
      this.$emit("reset");
    },
    // 车型选择
    carTypeModel (type, length, volume, weight) {
      this.form.vehicleMode = {
        ...this.form.vehicleMode,
        vehicleType: type,
        vehicleLength: length === "其他" ? 999 : length,
        vehicleVolume: volume,
        vehicleWeight: weight
      };
      this.$emit("update:formInfo", this.form);
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          return true;
        } else {
          return false;
        }
      });
    },
    resetInfo () {
      this.$refs.ruleForm.resetFields();
      this.form.attachments = []; //附件
      this.form.trackType = 1;
      this.form.deviceCode = ""; //电子回单号/快递单号
      this.form.secondDeviceCode = ""; //第二段 车次/航班号/电子回单号
      this.form.thirdDeviceCode = ""; //第三段电子回单
      this.form.isThirdShow = true; //第三段显示
      this.form.deleteFlag = false;
      this.form.checkValue = null; //多式联运
      this.form.currentAddress = []; //多式联运路径
      this.form.flyNo = null;
      this.form.flyTime = null;
      this.form.trainNum = null;
      this.form.trainTime = null;
      this.form.trainForm = null;
      this.form.trainTo = null;
      for (let key in this.form) {
        if (["deliver", "offLoad", "onLoad", "shipMode", "pick"].includes(key)) {
          this.form[key] = 0;
        }
      }
      for (let key in this.form.receiptAddress) {
        this.form.receiptAddress[key] = "";
      }
      for (let key in this.form.secordReceiptAddress) {
        this.form.secordReceiptAddress[key] = "";
      }
      if (this.form.transportMode === 1) {
        this.form.chargeMode = 2;
        this.form.priceUnit = 3;
      } else {
        this.form.vehicleMode.vehicleCount = 1;

        this.$refs.modelsSelector.initData();
      }
    },
    getReply (humidity, temperature) {
      // humidity 湿度   temperature 温度
      console.log("getReply---------", humidity, temperature);
      this.form.humidity = humidity
      this.form.temperature = temperature
      console.log(this.form)
    },
  }
};
</script>
<style lang="scss" scoped>
/deep/ .el-input__inner {
  height: 36px !important;
  line-height: 36px !important;
  font-size: 14px;
}
.radioGroupSty {
  text-align: center;
  margin-bottom: 20px;
  .el-radio-group {
    border: 1px solid var(--prev-color-primary);
    opacity: 1;
    border-radius: 5px;
  }
}
.transport-type {
  /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    color: var(--prev-bg-white) !important;
  }
  /deep/ .el-radio-button__inner {
    // padding: 12px 50px;
    width: 100px;
    height: 46px;
    line-height: 26px;
    font-size: 18px;
    font-weight: bold;
    color: var(--prev-color-primary);
    // font-weight: bold;
  }
}
// radio，checkbox最小宽度
.el-radio,
.el-checkbox {
  min-width: 120px;
}
.img-box {
  width: 100%;
  overflow: auto;
  white-space: nowrap;
}
.img {
  cursor: pointer;
  border: 1px solid #eee;
  width: 120px;
  // height: 130px;
  display: inline-block;
  overflow: hidden;
  border-radius: 5px;
  margin-right: 10px;
  * {
    padding: 0;
    margin: 0;
  }
  img {
    width: 120px;
    // height: 100px;
    overflow: hidden;
  }
  > span {
    line-height: 30px;
    height: 30px;
    text-align: center;
    display: block;
    margin-top: -15px;
  }
}
.active {
  border: 2px solid var(--prev-color-primary);
}
.mt40 {
  margin-top: 40px;
}
</style>
